<%--
  Created by IntelliJ IDEA.
  User: Ren
  Date: 2022/10/20
  Time: 17:48
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>排班管理</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>

    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/button.css">
    <style>
        .table1 {
            border: 1px solid #ccc;

            border-collapse: collapse;

        }

    </style>
</head>
<body>
<div id="app">


    <div style="height: 53px;background-color: #56007d;text-align: center;">
        <span style="line-height: 53px;font-size: 22px;">益万家综合医院排班管理</span>
    </div>

    <div style="margin-top: 20px;">
        <table class="table1 table-bordered" style="table-layout: fixed" border="1px" cellspacing="0px"
               cellpadding="0px">
            <tr>
                <th style="width: 180px">医生列表</th>
                <th v-for="(item, index) in allTime1" style="width: 200px">{{item}}</th>
            </tr>
        </table>
    </div>


    <div v-for=" a in tableData" :data="tableData1">
        <table class="table1 table-bordered" style="table-layout: fixed;background-color: #042831;" border="1px" cellspacing="0px"

               cellpadding="0px">

            <tr style="width: 1073px;display: block;"

            >
                <td style="width: 134px;height: 121px;">
                    <div style="display: inline-block;position: relative;left: 16px;text-align: center;">
                        <img :src="a.dHeadurl" width="100px" height="100px"
                             style="text-align: center;display: block;"
                        >
                        <span>

        <el-popover trigger="hover" placement="top">
          <p  style="background-color: #042831;color: #238E68;">科室: {{ a.tName }}</p>
          <p style="background-color: #042831;color: #CC3299;">部门: {{ a.deptName }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ a.dName }}</el-tag>
          </div>
        </el-popover>


                        </span>
                    </div>
                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=0)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>
                    <button @click="look(a.dId)"     class="button black" style="position: relative;left: 6px;top: 5px;color: slateblue;">查看排班</button>


                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=1)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=2)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=3)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=4)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=5)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>
                <td style="width: 134px;height: 121px;" :data="r">

                    <button @click="adjust(a.dId,r.d=6)"
                            class="button black"
                            style="position: relative;left: 20px;"
                    >>排班
                    </button>

                </td>


            </tr>

        </table>

        <!--修改弹出框的代码-->
        <el-dialog
                title="提示"
                :visible.sync="rosterFlag"
                width="36%"
                @close="clearMsg"
        >
            <el-form label-width="80px" :model="rosterMsg" ref="addFormRef">

                <el-form-item label="挂号人数" prop="sNum">
                    <el-input v-model="rosterMsg.sNum"></el-input>
                </el-form-item>

                <el-form-item label="挂号单价" prop="sPrice">
                    <el-input v-model="rosterMsg.sPrice"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="rosterFlag = false">取 消</el-button>
    <el-button type="primary" @click="addRoster">确 定</el-button>
  </span>
        </el-dialog>



        <el-dialog title="排班信息" :visible.sync="dialogTableVisible12">
            <el-table :data="gridData">
                <el-table-column property="sDate" label="日期" width="150">

                </el-table-column>
                <el-table-column property="sNum" label="剩余预约人数" width="200">

                </el-table-column>
                <el-table-column property="sPrice" label="预约价格">

                </el-table-column>
                <el-table-column property="sStatus" label="预约状态">

                    <template slot-scope="scope">

                        <el-tag  type="danger" v-if="scope.row.sStatus == 0">不可预约</el-tag>
                        <el-tag  type="success" v-else-if="scope.row.sStatus !== 0">可以预约</el-tag>


                    </template>


                </el-table-column>

            </el-table>

        </el-dialog>

    </div>


</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {

            gridData:[],
            //排班数据
            rosterMsg: {},
            //弹出框的标记
            rosterFlag: false,
            rosterFlag1: false,
            r: {},
            tableData: [],
            tableData1: [],
            allTime: [],
            allTime1: [],
            doctorVo: {},
            dialogTableVisible12:false,

            dId: 0,
            d: 0,

        },

        created() {
            this.allTime.push(this.dateBeforeToday(0));
            this.allTime.push(this.dateBeforeToday(1));
            this.allTime.push(this.dateBeforeToday(2));
            this.allTime.push(this.dateBeforeToday(3));
            this.allTime.push(this.dateBeforeToday(4));
            this.allTime.push(this.dateBeforeToday(5));
            this.allTime.push(this.dateBeforeToday(6));

            this.allTime1.push(this.dateBeforeToday1(0));
            this.allTime1.push(this.dateBeforeToday1(1));
            this.allTime1.push(this.dateBeforeToday1(2));
            this.allTime1.push(this.dateBeforeToday1(3));
            this.allTime1.push(this.dateBeforeToday1(4));
            this.allTime1.push(this.dateBeforeToday1(5));
            this.allTime1.push(this.dateBeforeToday1(6));
            this.inTable();

        },
        methods: {


            //确定调班
            addRoster() {

                axios.post("/scheduling/add", this.rosterMsg).then(resp => {
                    this.$message.success("排班成功");
                    this.rosterFlag = false;
                    this.rosterFlag1 = true;

                })
            },

            look(dId){
                axios.get("/scheduling/selectone?sDid="+dId).then(resp => {
                    console.log(resp.data)
                    this.gridData=resp.data.data
                    this.dialogTableVisible12=true
                })
            },

            //调班按钮
            adjust(dId, d) {
                this.rosterFlag = true;
                let a = new Array();
                a = this.allTime
                this.rosterMsg.sDate = a[d]
                this.rosterMsg.sDid = dId
                this.rosterMsg.sStatus = 1
                this.dId = dId
                this.d = d

            },

            inTable() {
                axios.post("/doctor/all?currentPage=1" + "&pageSize=50", this.doctorVo).then(resp => {
                    console.log(resp)
                    this.tableData = resp.data.data.list;

                });
            },

            dateBeforeToday(dayNum) {
                let now = new Date();     // 获取当前日期
                let todayStr = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
                let targetDay = new Date(now.getTime() + dayNum * 24 * 3600 * 1000);  //getTime()获取当前时间距离1970年的毫秒数，这是重点
                let tarDayStr = targetDay.getFullYear() + "-" + (targetDay.getMonth() + 1) + "-" +
                    targetDay.getDate() + " " + targetDay.getHours() + ":" + targetDay.getMinutes() + ":" + targetDay.getSeconds();
                return tarDayStr; // 返回当前时间字符串及目标日期字符串，格式自己设置
            },
            dateBeforeToday1(dayNum) {
                let now = new Date();     // 获取当前日期
                let todayStr = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
                let targetDay = new Date(now.getTime() + dayNum * 24 * 3600 * 1000);  //getTime()获取当前时间距离1970年的毫秒数，这是重点
                let tarDayStr = targetDay.getFullYear() + "-" + (targetDay.getMonth() + 1) + "-" +
                    targetDay.getDate();
                return tarDayStr; // 返回当前时间字符串及目标日期字符串，格式自己设置
            }


        }


    })
</script>
</html>
